<template>
  <div class="xdm-dialog">
    <div class="title">下垫面信息</div>
    <img
      src="/static/images/dialog/closeBtn.png"
      alt=""
      class="close"
      @click="closeDialog"
      style="top:15px;z-index:10;"
    />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="下垫面信息" name="first">
        <ul class="map-list">
          <li>
            <div class="mapBox">
              <DemMap></DemMap>
            </div>
          </li>
          <li>
            <div class="mapBox">
              <WaterMap></WaterMap>
            </div>
          </li>
          <li>
            <div class="mapBox">
              <VegetationtypeMap></VegetationtypeMap>
            </div>
          </li>
          <li>
            <div class="mapBox">
              <SoiltypeMap></SoiltypeMap>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="模型配置" name="second">
        <div class="flex-box">
          <div class="left-box">
            <dl>
              <dt>网格蒸散发：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value1"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>网格产流：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value2"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>网格分水源：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value3"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>坡地网格地面径流汇流：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value4"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>坡地网壤中流汇流：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value5"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>坡地网格地下径流汇流：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value6"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
            <dl>
              <dt>河道网格汇流：</dt>
              <dd>
                <el-input
                  type="text"
                  v-model="value7"
                  autocomplete="off"
                  disabled
                ></el-input>
              </dd>
            </dl>
          </div>
          <div class="right-box" id="mapItem">
            <div class="mapBox">
              <ModelConfigMap></ModelConfigMap>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="模型参数" name="three">
        <el-tabs
          :tab-position="tabPosition"
          class="inside-tab"
          @tab-click="handleClick"
          style="height:600px;margin: 0 20px;"
        >
          <el-tab-pane label="参数取值" style="width:100%;padding-left: 0;">
            <el-table
              v-show="formType == '土地覆盖参数'"
              :data="tableData1"
              height="570"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column prop="index" label="编号"> </el-table-column>
              <el-table-column prop="vegetationType" label="植被类型">
              </el-table-column>
              <el-table-column prop="LAImax" label="LAImax"> </el-table-column>
              <el-table-column prop="Hlc" label="HLc"> </el-table-column>
              <el-table-column prop="nhc" label="nhc"> </el-table-column>
              <el-table-column label="LAI">
                <el-table-column prop="Jan" label="Jan"> </el-table-column>
                <el-table-column prop="Feb" label="Feb"> </el-table-column>
                <el-table-column prop="Mar" label="Mar"> </el-table-column>
                <el-table-column prop="Apr" label="Apr"> </el-table-column>
                <el-table-column prop="May" label="May"> </el-table-column>
                <el-table-column prop="Jun" label="Jun"> </el-table-column>
                <el-table-column prop="Jul" label="Jul"> </el-table-column>
                <el-table-column prop="Aug" label="Aug"> </el-table-column>
                <el-table-column prop="Sep" label="Sep"> </el-table-column>
                <el-table-column prop="Oct" label="Oct"> </el-table-column>
                <el-table-column prop="Nov" label="Nov"> </el-table-column>
                <el-table-column prop="Dec" label="Dec"> </el-table-column>
              </el-table-column>
            </el-table>
            <el-table
              v-show="formType == '土壤参数'"
              :data="tableData2"
              height="570"
              border
              stripe
              class="soilTable"
              style="width: 100%"
            >
              <el-table-column prop="index" label="分类编号" width="180">
              </el-table-column>
              <el-table-column prop="soilType" label="土壤类型" width="180">
              </el-table-column>
              <el-table-column prop="θz" label="θz(饱和含水量)">
              </el-table-column>
              <el-table-column prop="θfc" label="θfc(田间持水量)">
              </el-table-column>
              <el-table-column prop="θwp" label="θwp(凋萎系数)">
              </el-table-column>
            </el-table>
            <el-table
              v-show="formType == '网络模型参数'"
              :data="tableData3"
              height="570"
              border
              stripe
              @cell-click="reEdit"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column prop="paranm" label="参数"> </el-table-column>
              <el-table-column prop="paradesc" label="物理意义">
              </el-table-column>
              <el-table-column prop="parav" label="参数值"> </el-table-column>
            </el-table>
            <el-radio-group v-model="formType">
              <el-radio label="土地覆盖参数"></el-radio>
              <el-radio label="土壤参数"></el-radio>
              <el-radio label="网络模型参数"></el-radio>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="参数分布">
            <ul>
              <li>
                <div class="mapBox"></div>
              </li>
              <li>
                <div class="mapBox"></div>
              </li>
              <li>
                <div class="mapBox"></div>
              </li>
              <li>
                <div class="mapBox"></div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="初始状态" name="four">
        <div class="form-title">流域初始土壤含水量换算系数表</div>
        <el-table
          :data="tableData4"
          height="620"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="MONTH" label="月份" width="180">
          </el-table-column>
          <el-table-column prop="w0" label="土壤含水量（W0）" width="180">
          </el-table-column>
          <el-table-column prop="WU0" label="上层土壤含水量（WU0）">
          </el-table-column>
          <el-table-column prop="WL0" label="下层土壤含水量（WL0）">
          </el-table-column>
          <el-table-column prop="s0" label="自由水蓄量（S0）">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import Arcgis from './qhh-heatmap.vue'
// 第一组地图
import DemMap from './mapOne/qhh-heatmap-DEM.vue'
import SoiltypeMap from './mapOne/qhh-heatmap-Soiltype.vue'
import VegetationtypeMap from './mapOne/qhh-heatmap-Vegetationtype.vue'
import WaterMap from './mapOne/qhh-watermap.vue'
// 第二组地图
import KGMap from './mapTwo/qhh-heatmap-KG.vue'
import KIMap from './mapTwo/qhh-heatmap-KI.vue'
import SMMap from './mapTwo/qhh-heatmap-SM.vue'
import WMMap from './mapTwo/qhh-heatmap-WM.vue'
// 中间水流地图
import ModelConfigMap from './qhh-watermap-ModelConfig.vue'

export default {
  data() {
    return {
      activeName: 'first',
      value1: '三层蒸散发模块',
      value2: '蓄满产流模块',
      value3: '自由水蓄水库模块',
      value4: '运动波汇流模块',
      value5: '逐网格Muskingum汇流模块',
      value6: '线型水库汇流模块',
      value7: '逐网格Muskingum汇流模块',
      tableData: [],
      tableData1: [
        {
          index: 1,
          vegetationType: '水体',
          LAImax: 0,
          Hlc: 0,
          nhc: 0.3,
          Jan: 0,
          Feb: 0,
          Mar: 0,
          Apr: 0,
          May: 0,
          Jun: 0,
          Jul: 0,
          Aug: 0,
          Sep: 0,
          Oct: 0,
          Nov: 0,
          Dec: 0,
        },
        {
          index: 2,
          vegetationType: '常绿针叶林',
          LAImax: 10.76,
          Hlc: 17,
          nhc: 0.1,
          Jan: 8.76,
          Feb: 9.16,
          Mar: 9.827,
          Apr: 10.093,
          May: 10.36,
          Jun: 10.76,
          Jul: 10.493,
          Aug: 10.227,
          Sep: 10.093,
          Oct: 9.827,
          Nov: 9.16,
          Dec: 8.76,
        },
        {
          index: 3,
          vegetationType: '常绿阔叶林',
          LAImax: 6,
          Hlc: 35,
          nhc: 0.1,
          Jan: 5.117,
          Feb: 5.117,
          Mar: 5.117,
          Apr: 5.117,
          May: 5.117,
          Jun: 5.117,
          Jul: 5.117,
          Aug: 5.117,
          Sep: 5.117,
          Oct: 5.117,
          Nov: 5.117,
          Dec: 5.117,
        },
        {
          index: 4,
          vegetationType: '落叶针叶林',
          LAImax: 10.76,
          Hlc: 15.5,
          nhc: 0.1,
          Jan: 8.76,
          Feb: 9.16,
          Mar: 9.827,
          Apr: 10.093,
          May: 10.36,
          Jun: 10.76,
          Jul: 10.493,
          Aug: 10.227,
          Sep: 10.093,
          Oct: 9.827,
          Nov: 9.16,
          Dec: 8.76,
        },
        {
          index: 5,
          vegetationType: '落叶阔叶林',
          LAImax: 7.17,
          Hlc: 20,
          nhc: 0.1,
          Jan: 0.52,
          Feb: 0.52,
          Mar: 0.867,
          Apr: 2.107,
          May: 4.507,
          Jun: 6.773,
          Jul: 7.173,
          Aug: 6.507,
          Sep: 5.04,
          Oct: 2.173,
          Nov: 0.867,
          Dec: 0.52,
        },
        {
          index: 6,
          vegetationType: '混合林',
          LAImax: 8.83,
          Hlc: 19.25,
          nhc: 0.1,
          Jan: 4.64,
          Feb: 4.84,
          Mar: 5.347,
          Apr: 6.1,
          May: 7.434,
          Jun: 8.767,
          Jul: 8.833,
          Aug: 8.367,
          Sep: 7.567,
          Oct: 6.0,
          Nov: 5.014,
          Dec: 4.64,
        },
        {
          index: 7,
          vegetationType: '森林地',
          LAImax: 8.54,
          Hlc: 14.34,
          nhc: 0.1,
          Jan: 5.276,
          Feb: 5.529,
          Mar: 6.006,
          Apr: 6.443,
          May: 7.245,
          Jun: 8.364,
          Jul: 8.54,
          Aug: 8.127,
          Sep: 7.253,
          Oct: 6.329,
          Nov: 5.626,
          Dec: 5.301,
        },
        {
          index: 8,
          vegetationType: '林地草原',
          LAImax: 6.24,
          Hlc: 7.04,
          nhc: 0.3,
          Jan: 2.333,
          Feb: 2.482,
          Mar: 2.727,
          Apr: 3.033,
          May: 3.885,
          Jun: 5.521,
          Jul: 6.24,
          Aug: 5.773,
          Sep: 4.156,
          Oct: 3.127,
          Nov: 2.618,
          Dec: 2.404,
        },
        {
          index: 9,
          vegetationType: '密集灌木林',
          LAImax: 5.07,
          Hlc: 0.6,
          nhc: 0.3,
          Jan: 0.581,
          Feb: 0.629,
          Mar: 0.629,
          Apr: 0.629,
          May: 0.919,
          Jun: 1.769,
          Jul: 2.551,
          Aug: 2.554,
          Sep: 1.729,
          Oct: 0.97,
          Nov: 0.726,
          Dec: 0.629,
        },
        {
          index: 10,
          vegetationType: '稀疏灌木林',
          LAImax: 6,
          Hlc: 0.51,
          nhc: 0.2,
          Jan: 0.4,
          Feb: 0.404,
          Mar: 0.314,
          Apr: 0.223,
          May: 0.25,
          Jun: 0.33,
          Jul: 0.432,
          Aug: 0.8,
          Sep: 1.167,
          Oct: 0.789,
          Nov: 0.504,
          Dec: 0.404,
        },
        {
          index: 11,
          vegetationType: '牧草地/草原',
          LAImax: 4.78,
          Hlc: 0.57,
          nhc: 0.17,
          Jan: 0.782,
          Feb: 0.893,
          Mar: 1.004,
          Apr: 1.116,
          May: 1.782,
          Jun: 3.671,
          Jul: 4.782,
          Aug: 4.227,
          Sep: 2.004,
          Oct: 1.227,
          Nov: 1.004,
          Dec: 0.893,
        },
        {
          index: 12,
          vegetationType: '作物地',
          LAImax: 5.98,
          Hlc: 0.55,
          nhc: 0.35,
          Jan: 0.782,
          Feb: 0.893,
          Mar: 1.004,
          Apr: 1.116,
          May: 1.782,
          Jun: 3.671,
          Jul: 4.782,
          Aug: 4.227,
          Sep: 2.004,
          Oct: 1.227,
          Nov: 1.004,
          Dec: 0.893,
        },
        {
          index: 13,
          vegetationType: '裸露地',
          LAImax: 0.74,
          Hlc: 0.2,
          nhc: 0.01,
          Jan: 0.001,
          Feb: 0.001,
          Mar: 0.001,
          Apr: 0.001,
          May: 0.001,
          Jun: 0.001,
          Jul: 0.001,
          Aug: 0.001,
          Sep: 0.001,
          Oct: 0.001,
          Nov: 0.001,
          Dec: 0.001,
        },
        {
          index: 14,
          vegetationType: '城市用地',
          LAImax: 5.02,
          Hlc: 6.02,
          nhc: 0.015,
          Jan: 1.287,
          Feb: 1.395,
          Mar: 1.551,
          Apr: 1.773,
          May: 2.519,
          Jun: 4.137,
          Jul: 5.021,
          Aug: 4.58,
          Sep: 2.848,
          Oct: 1.886,
          Nov: 1.518,
          Dec: 1.366,
        },
      ], //土地覆盖参数表格
      tableData2: [
        {
          index: 1,
          soilType: '沙土',
          θz: 0.38,
          θfc: 0.15,
          θwp: 0.04,
        },
        {
          index: 2,
          soilType: '壤砂土',
          θz: 0.41,
          θfc: 0.19,
          θwp: 0.05,
        },
        {
          index: 3,
          soilType: '砂壤土',
          θz: 0.42,
          θfc: 0.27,
          θwp: 0.09,
        },
        {
          index: 4,
          soilType: '粉壤土',
          θz: 0.47,
          θfc: 0.35,
          θwp: 0.15,
        },
        {
          index: 5,
          soilType: '粉土',
          θz: 0.48,
          θfc: 0.34,
          θwp: 0.11,
        },
        {
          index: 6,
          soilType: '壤土',
          θz: 0.44,
          θfc: 0.3,
          θwp: 0.14,
        },
        {
          index: 7,
          soilType: '砂质粘壤土',
          θz: 0.43,
          θfc: 0.29,
          θwp: 0.16,
        },
        {
          index: 8,
          soilType: '粉质粘壤土',
          θz: 0.47,
          θfc: 0.41,
          θwp: 0.24,
        },
        {
          index: 9,
          soilType: '黏壤土',
          θz: 0.45,
          θfc: 0.36,
          θwp: 0.21,
        },
        {
          index: 10,
          soilType: '砂质粘土',
          θz: 0.42,
          θfc: 0.33,
          θwp: 0.21,
        },
        {
          index: 11,
          soilType: '粉粘土',
          θz: 0.45,
          θfc: 0.43,
          θwp: 0.28,
        },
        {
          index: 12,
          soilType: '粘土',
          θz: 0.45,
          θfc: 0.4,
          θwp: 0.28,
        },
      ], //土壤参数表格
      tableData3: [], //网络模型参数表格
      tableData4: [], //初始状态
      formType: '土地覆盖参数',
      tabPosition: 'left',
      modulesname: {
        //对应模块接口路径
        DEM: 'getDEM',
        river: 'getRivergrid',
        vegetationtype: 'getVegetationtype',
        soiltype: 'getSoiltype',
        modelConfig: 'getModelConfig',
        WM: 'getWM',
        SM: 'getSM',
        KG: 'getKG',
        KI: 'getKI',
      },
    }
  },
  components: {
    DemMap,
    SoiltypeMap,
    VegetationtypeMap,
    WaterMap,
    KGMap,
    KIMap,
    SMMap,
    WMMap,
    ModelConfigMap,
  },
  created() {
    this.getModelValue() //网络模型参数
    this.getDefaultParams() //初始状态
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    closeDialog() {
      this.$store.state.showXDMDialog = false
    },
    //获取网络模型参数表格
    getModelValue() {
      console.log(this.$store.state.modulesSrc)
      switch (this.$store.state.modulesSrc) {
        case 'planDetail': //方案查询
          this.axios
            .post(this.$api.getModelValue1, {
              plcd: this.$store.state.stationCode,
            })
            .then((res) => {
              if (res.data.REPCODE == 1) {
                this.tableData3 = res.data.DATA.result
                this.$store.state.table3Data = this.tableData3
                var paramList = []
                this.tableData3.map((item) => {
                  paramList.push({
                    paranm: item.paranm,
                    parav: item.parav,
                  })
                })

                this.$store.dispatch('ansySetParamList', paramList)
              }
            })
            .catch((err) => {
              console.log(err)
            })
          break
        case 'planManage': //创建方案
          this.axios
            .post(this.$api.getModelValue, {
              stcd: this.$store.state.stationCode,
            })
            .then((res) => {
              if (res.data.REPCODE == 1) {
                this.tableData3 = res.data.DATA.result
                this.$store.state.table3Data = this.tableData3
                var paramList = []
                this.tableData3.map((item) => {
                  paramList.push({
                    paranm: item.paranm,
                    parav: item.parav,
                  })
                })

                this.$store.dispatch('ansySetParamList', paramList)
              }
            })
            .catch((err) => {
              console.log(err)
            })
          break
      }
    },
    //初始状态
    getDefaultParams() {
      this.axios
        .get(this.$api.getDefaultStatus)
        .then((res) => {
          if (res.data.REPCODE == 1) {
            this.tableData4 = res.data.DATA.result
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //下面是利用给表格添加className,添加index
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex //拿到的索引赋值给row的index,在这个表格中能拿到row的里面都会包含index
      return 'row-remarks' //className(类名)
    },
    //点击单元格事件
    reEdit(row, column, cell, event) {
      if (column.property == 'parav') {
        this.$store.state.editKey = 'parav'
        this.$store.state.showEditDialog = true
        this.$store.state.editValueIndex = row.index
      }
    },
  },
  mounted() {},
}
</script>

<style lang="less">
.xdm-dialog {
  .el-tab-pane {
    height: 600px;
    width: 100%;
    padding-right: 0;
  }
  .el-tabs__nav-scroll {
    margin-top: 20px;
  }
  .mapBox {
    width: 100%;
    height: 100%;
  }
}
.el-radio-group {
  padding: 10px 0;
}
.soilTable .is-scrolling-none {
  height: 100% !important;
}
// 表格样式美化
.el-table th,
.el-table thead.is-group th {
  background-color: #0a416f;
}
.el-table tr {
  background-color: #092656;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #092656;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #08345b;
}
.el-table thead {
  font-size: 16px;
  font-weight: normal;
  color: #17e4f6;
}
.el-table th > .cell,
.el-table .cell {
  text-align: center;
}
.el-table--border td > .cell {
  color: #ffffff;
  line-height: normal;
}
.el-table--border,
.el-table--group {
  border: 1px solid #0a487d;
}
.el-table--border th,
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: none;
}
.el-table th {
  padding: 4px 0;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #092656;
}
.el-table thead.is-group th.el-table_3_column_25 {
  border-bottom: 1px solid #3069c5;
}
</style>
